<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
    
    <style>
      .inner-border {
        position: relative;
        min-height: 90vh; /* 设置最小高度为视口高度 */
      }
      .inner-border::before {
        content: "";
        position: absolute;
        top: 10px; /* 内边框的位置 */
        left: 0px;
        right: 20px;
        bottom: 0px;
        border-radius: 10px; /* 设置圆角半径 */
        pointer-events: none; /* 让边框不可点击 */
      }
    </style>
  </head>

  <body>
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
          <div class="layui-row">
            <div class="layui-col-xs2 inner-border">
              <iframe id="source" name="source" src="source" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
            </div>
            <div class="layui-col-xs10  inner-border">
              <iframe id="indexpb" name="indexpb" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="/assets/cos-js-sdk-v5/cos-js-sdk-v5.js"></script>
    <script src="/layuiadmin/layui/layui.js"></script>
    <script>
      layui
        .config({
          base: "/layuiadmin/",
          version: "{:config('other.ui_version')}",
        })
        .extend({
          index: "lib/index", //主入口模块
        })
        .use(["index", "setting"]);
        
        function loadIndexPb(message) {
            const iframe2 = document.getElementById('indexpb');
            iframe2.src = `indexpb?source_key=${encodeURIComponent(message)}`;
        }

        // 监听 source 的消息
        window.addEventListener('message', function(event) {
            if (event.data && event.data.from === 'source') {
                loadIndexPb(event.data.message); // 动态加载 indexpb 并传递参数
            }
        });

        // 父页面方法：用于显示弹窗
        function openSourceConfigAddLayer(content) {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    type: 2
                    , title: '新增渠道配置'
                    , content: '/admin/setting/source_config_add'
                    , maxmin: true
                    , area: ['550px', '500px']
                });
            });
        }
        // 父页面方法：用于显示弹窗
        function openSourceConfigDelLayer(content) {
            layui.define(['admin']).use('layer', function () {
                var layer = layui.layer, admin = layui.admin;
                layer.confirm('是否确认要删除 ' + content.sourceName + ' 渠道配置?', {icon: 3}, function(){
                  layer.load();
                  admin.req({
                      url: '/admin/setting/source_config_del'
                      , data: content
                      , success: function (res) {
                          layer.closeAll("loading");
                          if (res.code == 0) {
                              layer.msg(res.msg, { icon: 1 });
                              setTimeout(function () {
                                  window.location.reload();
                              }, 1200);
                          }
                      }
                      , complete: function () {
                          layer.closeAll("loading");
                      }
                  });
                }, function(){
                  layer.msg('取消');
                });
            });
        }

        layui.use(['layer'], function () {
            var $ = layui.jquery;
            // 接收来自 source 的消息
            window.addEventListener('message', function (event) {
                if (event.data.type === 'source-selected') {
                    var source = event.data.source; // 接收选中的参数
                    // 将参数传递给 indexpb
                    var indexpb = document.getElementById('indexpb'); // indexpb 的 ID
                    indexpb.contentWindow.postMessage({ type: 'update-source', source: source }, '*');
                }
            });
        });
    </script>
  </body>
</html>
